<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子组件向父组件传值</title>
</head>
<body>
  <!-- 父组件模板 -->
  <div id="app">
    <cpn @item-click="cpnClick"></cpn><!--这里的cpnClick不用带括号，系统知道-->
  </div>
  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="(item, index) in categories" 
              :key="index"
              @click="btnclick(item)">
              {{item.name}}
      </button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    //1.子组件
    const cpn = {
      template: '#cpn',
      data() {   //data是一个函数，要返回一个对象
        return {
          categories: [
            {id: 'aaa',name: '热门推荐'},
            {id: 'bbb',name: '手机数码'},
            {id: 'ccc',name: '家用电器'},
            {id: 'ddd',name: '电脑办公'},
            {id: 'eee',name: '书记图书'},
          ]
        }
      },
      methods: {
        btnclick(item) {
          console.log(item)     //获取了子组件点击的数据，再传给父组件
          //发射事件，第一个参数是自定义事件名，第二个参数是自定义事件的参数
          //父组件通过@item-click=""接受
          this.$emit('item-click',item)
        }
      },
    }

    //2.父组件
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      components: {
        cpn
      },
      methods: {
        cpnClick(item) {
          console.log('cpnclick',item);
        }
      },
    })
  </script>
</body>
</html>